<script setup lang="ts">
import { inject, ref } from 'vue'
import { Dict, MenuType, TreeNode } from '@/views/desktop/type'
import { insert, deleteDict, update } from '@/api/desktop/DictApi'
import MyDialog from '@/assets/components/Dialog.vue'

const props = defineProps({ menu: MenuType })

let fullScreen = ref(false)
let dict = ref<Dict>(new Dict())
let dictTree = ref<Dict[]>([])
let formConfig = ref({
  name: '新增字典',
  visible: false,
  type: '',
})

const setFullScreen = () => {
  fullScreen.value = !fullScreen.value
}

const initTree = () => {
  dict.value.list().then((res) => {
    dictTree.value = []
    for (let item of res) {
      dictTree.value.push(item)
    }
  })
}
initTree()

let currentRow: TreeNode = new TreeNode()
const dataOperateMap = {
  noParentAdd: () => {
    insert(dict.value).then((res) => {
      initTree()
    })
  },
  add: () => {
    dict.value.ancestor = currentRow.id

    insert(dict.value).then((res) => {
      initTree()
    })
  },
  edit: () => {
    dict.value.id = currentRow.id
    delete dict.value.ancestor
    delete dict.value.code

    update(dict.value).then((res) => {
      initTree()
    })
  },
  delete: () => {
    deleteDict(currentRow.id).then((res) => {
      initTree()
    })
  },
}
const saveHandler = () => {
  dataOperateMap[formConfig.value.type]()
  formConfig.value.visible = false
}

const showFormVisibleMap = {
  add: (row) => {
    formConfig.value.name = `新增 ${row.name} 的子字典`
  },
  noParentAdd: () => {
    formConfig.value.name = '新增字典'
  },
  edit: (row) => {
    formConfig.value.name = `编辑 ${row.name} 字典`
  },
}
const showFormVisible = (row, type) => {
  formConfig.value.type = type
  currentRow = row
  showFormVisibleMap[formConfig.value.type](row)
  if (type != 'delete') {
    formConfig.value.visible = true
  }
}
</script>

<template>
  <el-dialog v-model="formConfig.visible" :title="formConfig.name" width="30%">
    <el-input v-model="dict.name" placeholder="请输入名称" />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="formConfig.visible = false">取消</el-button>
        <el-button type="primary" @click="saveHandler">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <my-dialog
    :menu="props.menu"
    :title="'字典管理'"
    :full-screen="fullScreen"
    :width="'50%'"
    @setFullScreen="setFullScreen"
  >
    <div>
      <el-button
        size="small"
        type="primary"
        @click="showFormVisible(null, 'noParentAdd')"
      >
        新增
      </el-button>

      <el-table
        class="mt-2"
        :data="dictTree"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        <el-table-column prop="name" label="名称" sortable />
        <el-table-column prop="type" label="代码" sortable />

        <el-table-column align="left">
          <template #header>
            <div>
              <span>操作</span>
            </div>
          </template>

          <template #default="scope">
            <div>
              <el-button
                size="small"
                type="primary"
                @click="showFormVisible(scope.row, 'add')"
              >
                新增
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="showFormVisible(scope.row, 'edit')"
              >
                修改
              </el-button>

              <el-popconfirm
                title="确认删除?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="dataOperateMap.delete()"
              >
                <template #reference>
                  <el-button
                    v-show="!(scope.row.children.length > 0)"
                    size="small"
                    type="danger"
                    @click="showFormVisible(scope.row, 'delete')"
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </my-dialog>
</template>

<style scoped></style>
